<template>
  <el-card class="box-card">
    <div class="title-container" style="margin-bottom: 10px;">
      <el-button type="success" @click="goBack">
        返回
      </el-button>
      <el-button type="primary" @click="addInstantiate">
        新增
      </el-button>
    </div>
    <div class="col over-auto">
      <common-table :tableHeight="'500'" v-loading="tableLoading" show-index show-check-box :columns="columns"
                    :list="list">
      </common-table>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>
  </el-card>
</template>

<script>
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"

  import { queryWorkNewList, openOrCloseWorkNewOne, deleteWorkNewOne } from "@/api/workflow/index"

  export default {
    components: {
      CommonTable
    },
    props: {
      deviceCode: String
    },
    data() {
      return {
        searchModel: {
          userName: ""
        },
        columns: [
          {
            title: "实例化编码",
            prop: "newCode",
            align: "center"
          },
          {
            title: "实例化名称",
            prop: "newName",
            align: "center"
          },
          {
            title: "应用状态",
            prop: "status",
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-tag", {
                props: {
                  type: params.row.status == "open" ? "success" : "danger"
                }
              }, params.row.status == "open" ? "启用" : "停用")])
            }
          },
          {
            title: "创建时间",
            prop: "createTime",
            align: "center"
          },
          {
            title: "操作",
            width: 300,
            align: "center",
            render: (h, params) => {
              return h("div", [h("el-button", {
                props: {
                  type: "success",
                  size: "mini"
                },
                on: {
                  click: () => {
                    this.handleDetail(params.row)
                  }
                }
              }, "查看"),
                h("el-button", {
                  props: {
                    type: "primary",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.handleUpdata(params.row)
                    }
                  }
                }, "修改"),
                h("el-button", {
                  props: {
                    type: "success",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.handleOpenClose(params.row)
                    }
                  }
                }, "启停用"),
                h("el-button", {
                  props: {
                    type: "warning",
                    size: "mini"
                  },
                  on: {
                    click: () => {
                      this.open(params.row)
                    }
                  }
                }, "删除")])
            }
          }
        ],
        list: [],
        tableLoading: false,
        dialogVisible: false,
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,
        warnCode: "",
        row: {}
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
      this.row = this.$route.query
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      addInstantiate() {
        this.$router.push({
          path: "/instantiate/instantiateIndex",
          query: {
            type: 2,
            status: 0,//新增
            workModelCode: this.row.workModelCode,
            projectCode: this.row.projectCode
          }
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      pagination(pageItem) {
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },
      handleDetail(val) {
        this.$router.push({
          path: "/instantiate/instantiateIndex",
          query: {
            type: 2,
            status: 2,//查看
            workModelCode: this.row.workModelCode,
            projectCode: this.row.projectCode,
            newCode: val.newCode
          }
        })
      },
      handleUpdata(val) {
        this.$router.push({
          path: "/instantiate/instantiateIndex",
          query: {
            type: 2,
            status: 1,//修改
            workModelCode: this.row.workModelCode,
            projectCode: this.row.projectCode,
            newCode: val.newCode
          }
        })
      },
      closeDialog() {
        this.dialogVisible = false
      },
      async getTableList() {
        this.tableLoading = true
        const { status, success, object, message } = await queryWorkNewList({ workModelCode: this.row.workModelCode, ...this.page })
        if (status == 200) {

          this.count = object.count
          this.list = object.data
        }
        this.tableLoading = false
      },
      async handleOpenClose(row) {
        const { status, success, object, message } = await openOrCloseWorkNewOne({
          newCode: row.newCode,
          type: row.status == "open" ? "close" : "open"
        })
        if (status == 200) {
          this.getTableList()
          this.$message({
            type: "success",
            message: object
          })
        }
      },
      open(row) {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.handleDelete(row)
        }).catch(() => {

        })
      },
      async handleDelete(row) {
        const { status, success, object, message } = await deleteWorkNewOne({ newCode: row.newCode })
        if (status == 200) {
          this.getTableList()
          this.$message({
            type: "success",
            message: message
          })
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .box-card {
    margin: 10px;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
